<template>
  <div class="all">
    <el-row class="all1" v-if="!lookDetail">
      <el-row class="top">
        <!-- 、background:green -->
        <el-card style="width:48%;height:320px">
          <el-row>
            <div style="width:100%; display:flex;justify-content:space-between;">
              <div style="display:flex;width:40%;padding-top:0px;align-items:center;">
                <span style="height:16px;width:6px;background:#3B95FF;margin-top:2px"></span>
                <span style="font-size:16px;font-weight:800;margin-left:6px;color:#1D2E54;">部门年度绩效排名</span>
              </div>
              <div style="display:flex;justify-content:end;margin-left:60px">
                <el-date-picker
                  :editable="false"
                  :clearable="false"
                  type="year"
                  value-format="yyyy"
                  @change="timeChange(ruleForm.year)"
                  :placeholder="(years)"
                  style="width:50%"
                  v-model="ruleForm.year"
                ></el-date-picker>
              </div>
            </div>

            <div id="main">
              <div>
                <el-row class="margins" v-for="item in rakings" :key="item.id">
                  <span style="display:flex;justify-content:space-between;font-size:14px">
                    <span v-if="item.ranking<=5? true :false" class="raing">第{{item.ranking}}名</span>
                    <span
                      :style="{'color':scoresd(item.score)}"
                      v-if="item.ranking<=5? true :false"
                      class="raing"
                    >{{item.departmentName+'/'+item.score+'分'}}</span>
                  </span>
                  <el-progress
                    style="width:108%"
                    v-if="item.ranking<=5? true :false"
                    :percentage="item.score"
                    :format="format"
                    :stroke-width="10"
                  ></el-progress>
                </el-row>
              </div>
            </div>
          </el-row>
        </el-card>
        <el-card style="width:48%;height:320px">
          <el-row>
            <div style="width:100%; display:flex;justify-content:space-between">
              <div style="display:flex;width:40%;padding-top:0px;align-items:center;">
                <span style="height:16px;width:6px;background:#3B95FF;margin-top:2px"></span>
                <span
                  style="font-size:16px;font-weight:800;margin-left:6px;color:#1D2E54;"
                >{{ gongshiName==1?'绩效公示': gongshiName==2?'绩效复议公示': gongshiName==3?'绩效变更公示':'绩效结果公示'}}</span>
              </div>
              <!-- /              :autofocus="true" -->
              <div class="gongshi">
                <el-button
                  :autofocus="true"
                  size="mini"
                  style="margin-right:-10px"
                  @click="gongshi1"
                >绩效公示</el-button>
                <el-button size="mini" style="margin-right:-10px" @click="gongshi2">绩效复议公示</el-button>
                <el-button size="mini" style="margin-right:-10px" @click="gongshi3">绩效变更公示</el-button>
                <el-button size="mini" style="margin-right:-10px" @click="gongshi4">绩效结果公示</el-button>
              </div>
            </div>
          </el-row>

          <el-row style="width:101%;height:230px;margin-top:3%;overflow: auto;" class="inner">
            <el-row
              v-for="(item, index) in GongGaoList"
              :key="index"
              style="width:100%;font-size: 14px;margin-top:2%;display:flex;background: #f1f7ff;text-align:center;align-items:center;"
            >
              <el-button
                @click="lookResult(item,index)"
                type="text"
                class="gongshis"
                style="font-size: 14px;display:flex;text-align:center;align-items:center;"
              >
                <p class="colord" style="color:#333333">
                  {{ '《'+item.name+'》'+'点击查看考核结果' }}
                  <span
                    v-if="item.isTop==0? true: false"
                    isTop
                    style="color:#FFFFFF;display:inline-block;line-height:18px;font-size:12px;text-align:center;align-items:center;width: 34px;height: 18px;background: #E86565;border-radius: 2px 2px 2px 2px;margin-left:12px"
                  >置顶</span>
                </p>
              </el-button>
              <i class="el-icon-arrow-right el-icon--right"></i>
            </el-row>
          </el-row>
        </el-card>
      </el-row>
      <el-row class="bottom">
        <span
          style="display:flex;justify-content:space-between;width:100%;padding:0px 5px 0px 5px;align-items:center;height:38px; background:#fff"
        >
          <h4 style="color:#1D2E54;font-size: 16px;">最新考核公示</h4>
          <el-form style="display:flex;align-items:center;justify-content:end;">
            <el-form-item label="部门" style="height:32px;margin-top:15px;">
              <el-select
                clearable
                style="width:75%;height:32px;"
                v-model="ruleForm1.assessAdministratorUserId"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in this.departments"
                  :key="item.id"
                  :label="item.departmentName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="姓名" style="height:32px;margin-top:15px;">
              <el-input style="width:75%;;height:32px;" v-model="ruleForm1.name"></el-input>
            </el-form-item>
            <el-button type="primary" @click="sousuo()">搜索</el-button>
          </el-form>
        </span>
        <el-row style="margin-top:5px">
          <el-table
            style="width: 100%; color: #333333; font-size: 14px"
            height="460"
            align="center"
            :data="tableData"
            :header-cell-style="{ background: '#ECF1F9' }"
          >
            <el-table-column fixed align="center" type="index" label="序号" width="120"></el-table-column>
            <el-table-column prop="userName" align="center" label="姓名"></el-table-column>
            <el-table-column prop="departmentName" align="center" label="部门" width="120"></el-table-column>
            <el-table-column prop="templateName" align="center" label="考核表"></el-table-column>
            <el-table-column prop="grade" align="center" label="等级">
              <template v-slot="scope">
                <span v-if="scope.row.grade == 1">好</span>
                <span v-else-if="scope.row.grade === 2">较好</span>
                <span v-else-if="scope.row.grade === 3">一般</span>
                <span v-else-if="scope.row.grade === 4">差</span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" align="center" label="操作">
              <template slot-scope="scope">
                <!-- @click.native.prevent="editRow(scope.row)" -->
                <el-button
                  type="text"
                  size="small"
                  style="color: #3B95FF"
                  @click.native.prevent="editRow(scope.row)"
                >查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row style="background:#fff">
            <el-pagination
              style="text-align: right;margin-top:16px"
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[5, 10]"
              :page-size="pageSize"
              layout="sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </el-row>
        </el-row>
      </el-row>
    </el-row>
    <!-- 绩效通知 -->
    <el-card class="all2" v-if="!lookDetail">
      <el-row class="pic"></el-row>
      <el-row class="contentsPic">
        <div>{{ jixiaoContent }}</div>
        <div style="margin-top:5%;color:#999">
          <div>发布人：{{ jixiaoName }}</div>
          <div>发布时间：{{ jixiaotime.substring(0,16)}}</div>
        </div>
      </el-row>
    </el-card>

    <el-dialog :title="dialogList.name" :visible.sync="centerDialogVisible" width="30%" center>
      <el-row style="width:100%;height:auto;border: 1px solid #E4E4E4;padding:2%;border-radius:5px">
        <span>{{dialogList.content}}</span>
      </el-row>
      <el-row style="margin-top:2%;">
        附件：
        <el-button
          v-if="dialogList.accessoryBeans.length!==0"
          type="text"
          style="border:none"
          v-for="item in dialogList.accessoryBeans"
          :key="item.index"
          @click="openDoc(item.url)"
        >{{ item.name}}</el-button>
        <span v-if="dialogList.accessoryBeans.length==0">暂无</span>
        <!-- <a
          targrt="_blank"
          :href="item.url"
          v-for="item in dialogList.accessoryBeans"
          :key="item.index"
        >{{ item.name}}</a>-->
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false" type="primary">关闭</el-button>
      </span>
    </el-dialog>
    <lookDetails v-if="lookDetail" :dataTypes1="personInfo" @giveFather1="getSon1"></lookDetails>
  </div>
</template>

<script>
import { serverUrl } from "@/look";
import { Base64 } from "js-base64";
import {
  userOneStep,
  Querydepartment,
  getGongGaoList,
  getJILUdata,
  getUserId,
  getjixiaoList
} from "@/api2/kaohe";
import lookDetails from "./components/lookDetails.vue";

export default {
  components: {
    lookDetails: lookDetails
  },
  data() {
    return {
      ruleForm: {
        year: ""
      },
      ruleForm1: {
        name: "",
        assessAdministratorUserId: ""
      },
      dialogList: {
        name: "",
        content: "",
        accessoryBeans: []
      },
      jixiaotime: "",
      jixiaoName: "",
      jixiaoContent: "", //绩效通知内容
      userIds: "",
      lookDetail: false,
      centerDialogVisible: false,
      pageNum: 1, //当前页
      total: 0, //总条数
      tableData: [], //当前页码的表格数据
      pageSize: 10, //当前页容量
      years: "", //当前年
      path: [],
      rakings: [],
      departments: [],
      GongGaoList: [],
      gongshiName: "",
      defaultOption: {
        step: 0.3,
        limitMoveNum: 7
      }
    };
  },
  created() {
    this.getUser();
    this.raking(); //排名
    this.nowtime();
    this.getUserIds();
    // this.gongshi1();

    this.getGongGaoLists(1); //公告数据
    // this.getJILUdatas(1); //最新公示数据
  },
  methods: {
    //查看详情
    editRow(rows) {
      console.log(rows);
      this.personInfo = rows;
      this.lookDetail = true;
    },
    getSon1(temp) {
      this.lookDetail = false;
      this.getJILUdatas(this.userIds);
    },
    //获取用户基本信息
    getUserIds() {
      setTimeout(() => {
        getUserId()
          .then(res => {
            console.log(res);
            if (res.code == 0) {
              this.userIds == res.data.id;
              this.getJILUdatas(res.data.id); //获取表格数据(res.data); //获取表格数据
            } else {
              console.log(error);
            }
          })
          .catch(e => {
            console.log(e);
          });
      }, 500);
    },
    //获取当前年份
    nowtime() {
      let nowDate = new Date();
      let date = {
        // 获取当前年份
        year: nowDate.getFullYear()
      };
      this.years = date.year.toString();
    },
    // 获取所有人员id
    async getUser() {
      const res = await userOneStep();
      res.data.deptTreeList.forEach(item => {
        this.getTreePath(item.children, this.path);
      });
    },
    //时间change事件
    async timeChange(e) {
      console.log(e);
      const params = {
        year: e
      };
      const res = await Querydepartment(params);
      if (res.code == 0) {
        this.rakings = res.data.reverse();
      }
    },
    //获取部门考核人员的排名
    async raking() {
      let nowDate = new Date();
      let date = {
        // 获取当前年份
        year: nowDate.getFullYear()
      };
      const params = {
        year: date.year
      };
      console.log(params);
      const res = await Querydepartment(params);
      console.log(res);
      if (res.code == 0) {
        this.rakings = res.data.reverse();
      }
    },
    format(percentage) {
      return (percentage = ``);
    },
    //判断字体颜色
    scoresd(data) {
      let color = "";
      if (data == 100) {
        color = "red";
      } else {
        color = "";
      }
      return color;
    },
    getTreePath(val, pushd) {
      val.forEach(item => {
        if (item.children) {
          pushd.push({ id: item.id, departmentName: item.label });
          item.children.forEach(data => {
            if (data.children) {
              pushd.push({ id: data.id, departmentName: data.label });
              this.getTreePath(data.children, pushd);
            } else {
              return;
            }
          });
        } else {
          return;
        }
      });
      this.departments = pushd;
    },
    //默认公告数据
    async getGongGaoLists(e) {
      const params = {
        queryType: "3",
        type: e
      };
      const res = await getGongGaoList(params);
      if (res.code == 0) {
        console.log(res);
        this.gongshiName = e;
        this.GongGaoList = res.data.reverse();
      }

      const res1 = await getjixiaoList();
      if (res1.code == 0) {
        console.log(res1);
        this.jixiaoContent = res1.data[0].content;
        this.jixiaotime = res1.data[0].createTime;
        this.jixiaoName = res1.data[0].createBy;

        // this.gongshiName = e;
        // this.GongGaoList = res.data.reverse();
      }
    },
    async gongshi1() {
      this.getGongGaoLists(1);
    },
    async gongshi2() {
      this.getGongGaoLists(2);
    },
    async gongshi3() {
      this.getGongGaoLists(3);
    },
    async gongshi4() {
      this.getGongGaoLists(4);
    },
    //切换每页条数容量
    handleSizeChange(val) {
      this.pageSize = val;
      this.getJILUdatas(this.pageNum, this.pageSize);
    },
    //切换当前页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getJILUdatas();
    },
    async getJILUdatas(e) {
      const params = {
        isPush: 1,
        grade: 1,
        queryType: 4,
        userId: e
      };
      this.userIds = e;
      const res = await getJILUdata(params);
      if (res.code == 0) {
        this.tableData = res.data;
        this.total = res.total;
      }
    },
    async sousuo() {
      console.log(this.userIds);
      const params = {
        departmentId: this.ruleForm1.assessAdministratorUserId,
        userName: this.ruleForm1.name ? this.ruleForm1.name : "",
        queryType: 4,
        isPush: 1,
        grade: 1,
        userId: this.userIds
      };
      const res = await getJILUdata(params);
      if (res.code == 0) {
        this.tableData = res.data;
        this.total = res.total;
      }
    },
    lookResult(val, data) {
      console.log(val, data);
      this.dialogList.name = val.name;
      this.dialogList.content = val.content;
      this.dialogList.accessoryBeans = val.accessoryBeans;
      this.centerDialogVisible = true;
    },
    openDoc(e) {
      console.log(e);
      window.open(
        serverUrl +
          "onlinePreview?url=" +
          encodeURIComponent(Base64.encodeURI(e))
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.all {
  display: flex;
  align-items: center;
  background-color: #f4f5fc;
  .all1 {
    width: 75%;
    height: auto;
    margin: 15px 10px 0px 10px;
    // background-color: red;
    .top {
      display: flex;
      flex: 0.4;
      justify-content: space-between;
    }
    .bottom {
      padding: 1.1%;
      width: 100%;
      flex: 0.6;
      height: 100%;
      // background-color: blue;
    }
  }
  .all2 {
    width: 430px;
    height: auto;
    margin: 15px 10px 10px 0px;
    .pic {
      width: 100%;
      height: 180px;
      background: url("../../assets/kaohePng/jixiao.png") no-repeat;
      background-size: 100% 100%;
    }
    .contentsPic {
      margin-top: 4%;
      overflow: auto;
      padding: 25px;
      width: 100%;
      font-size: 14px;
      height: 640px;
      background: #f1f7ff;
      border-radius: 10px 10px 10px 10px;
      opacity: 1;
    }
  }
}
.colord:hover {
  color: #66b1ff;
}
.gongshi {
  margin-right: 2%;
  display: flex;
}
.gongshis {
  width: 100%;
  height: 32px;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
}
.seamless-warp {
  width: 100%;
  height: 32px;
  flex-direction: column;
}
#main {
  margin-top: 10px;
  width: 100%;
  height: 245px;
  align-items: center;
}
::v-deep .el-input__inner {
  height: 30px;
}

::v-deep .el-button {
  height: 30px;
  line-height: 5px;
  // padding: 0px 6px;
}
.margins {
  margin: 13px 0px 0px 20px;
}
::v-deep .el-input__icon {
  line-height: 32px;
}
::v-deep .contentsPic::-webkit-scrollbar {
  width: 0 !important;
}
::v-deep .inner::-webkit-scrollbar {
  width: 0 !important;
}
::v-deep .el-badge__content,
::v-deep .el-progress-bar__inner {
  background: linear-gradient(90deg, #a0c9fc 0%, #3b95ff 100%);
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
}
</style>